<template>
	<view class="onebox" @click="toActivityDetail()">
		<view class="state" v-if="isAfterTime(item.endTime)">
			已结束
		</view>
		<view class="state" v-else>
			进行中
		</view>
		<image :src="item.images[0]" mode="aspectFill" class="picture"></image>
		<view class="title">
			{{item.title}}
		</view>
		<view class="bottom">
			<image :src="item.avater" mode="" class="head"></image>
			<view class="name">
				<view class="uname">{{item.nickName}}</view>
				<view class="ulocation">{{item.address}}</view>
			</view>
			<view class="claps">
				<image :src="clapImage" mode="" class="clap" @click.stop="activeClap()"></image>
				<view class="number">
					{{item.attendNum}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"oneActivity",
		props:{
			item:{
				type:Object,
				default(){
					return {
						
						title:'官方线下活动来了~',
						uname:'一拍即合',
						address:'郑州市',
						head:'',
						images:'',
						signUpNumber:0,
					}
				}
			}
		},
		data() {
			return {
				state:'进行中',
				flag:true,
				clapImage: '/static/activityClap.png',
				clapImageNumber:0
			};
		},
		methods:{
			activeClap(){
				uni.navigateTo({
					url:`/pages/tribe/details/signUp?details=`+JSON.stringify(this.item)
				})
			
			},
			toActivityDetail(){
				uni.navigateTo({
					url:`/pages/tribe/details/activityDetails?details=`+JSON.stringify(this.item)
				})
			},
			isAfterTime(endtime){
				const givenDateTime = new Date(endtime);
				const now = new Date();  
				return now > givenDateTime;  
			}
		}
	}
</script>
<style lang="scss" scoped>
.onebox {
		height: 440rpx;
		width: 700rpx;
		background-color: #fff;
		display: block;
		margin-left: 25rpx;
		margin-right: 10rpx;
		margin-top: 50rpx;
		// border-radius: 55rpx;
		box-shadow: 15rpx 10rpx 12rpx 5rpx rgba(0, 0, 0, 0.1);
		position: relative;
		.state {
			z-index: 1;
			position: absolute;
			font-weight: bold;
			text-align: center;
			font-size: 25rpx;
			color: #373737;
			padding: 10rpx;
			top: 10rpx;
			width: 120rpx;
			height: 40rpx;
			background-color: #ef8e26;
		}
		.picture {
			background-color: pink;
			height: 300rpx;
			width: 650rpx;
			border-radius: 40rpx;
			margin-top: 20rpx;
			margin-left: 25rpx;
		}
		.title {
			font-size: 30rpx;
			font-weight: bold;
			width: 400rpx;
			margin-left: 23rpx;
			
			
		}
		.bottom {
			height: 60rpx;
			width: 650rpx;
			
			
			.head {
				display: inline-block;
				height: 60rpx;
				width: 60rpx;
				border-radius: 35rpx;
				margin-left: 25rpx;
				background-color: pink;
				position: relative;
				top: -20rpx;
			}
			.name {
				position: relative;
				top: -30rpx;
				display: inline-block;
				margin-left: 8rpx;
				// font-size: 25rpx;
				// font-weight: bold;
				height: 60rpx;
				width: 250rpx;
				
				.uname {
					font-size: 25rpx;
					font-weight: 600;
					margin-top: 30rpx;
					height: 30rpx;
				}
				.ulocation {
					font-size: 20rpx;
				}
			}
			.claps {
				display: inline-block;
				width: 60rpx;
				height: 90rpx;
				position: relative;
				top: -10rpx;
				right: -290rpx;
				
				.clap {
					width: 50rpx;
					height: 55rpx;
				}
				.number {
					text-align: center;
					color: dimgrey;
					font-size: 25rpx;
					position: relative;
					top: -8rpx;
				}
			}
		}
	}
</style>